<template>
  <div class="Geqlist" @mousemove="touchmove">
    <transition name="el-fade-in-linear">
      <div
        class="gonNen"
        v-show="isshou"
        :style="{ left: gonna.letX + 'px', top: gonna.letY + 'px' }"
      >
        <ul>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/pl.png" alt="" />
              </div>
              <span>查看评论(200000)</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer" @click="onplay">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/24gl-playCircle.png" alt="" />
              </div>
              <span>播放</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer" @click="xiayspla">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/asd.png" alt="" />
              </div>
              <span>下一首播放</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/scj.png" alt="" />
              </div>
              <span>添加收藏夹</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/fx.png" alt="" />
              </div>
              <span>分享</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/xz.png" alt="" />
              </div>
              <span>下载</span>
            </div>
          </li>
        </ul>
      </div>
    </transition>

    <el-table
      :data="SongInformation"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @cell-click="onguabi"
      @row-contextmenu="YOUda"
      :header-cell-style="{ backgroundColor: '#fcfcfc', color: '#606266' }"
    >
      <el-table-column label="" width="80px">
        <template slot-scope="scope">
          <div
            :class="[
              SongInformation[scope.$index].fee == 0 ? 'cord' : '',
              'texts',
            ]"
            @contextmenu.prevent="show"
          >
            {{ scope.row.indes }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" width="80px">
        <div @contextmenu.prevent="show" class="tubiao">
          <div class="imgs">
            <div class="tumian">
              <el-image
                style="width: 20px; height: 20px"
                :src="image_info.image"
              ></el-image>

              <el-image
                v-if="isow"
                style="width: 20px; height: 20px"
                :src="image_info.imagers"
              ></el-image>

              <el-image
                style="width: 19px; height: 19px"
                :src="image_info.xiazai"
              ></el-image>
            </div>
          </div>
        </div>
      </el-table-column>
      <el-table-column label="音乐标题" min-width="30%">
        <template slot-scope="scope">
          <div
            :class="[
              SongInformation[scope.$index].fee == 0 ? 'cord' : '',
              'texts',
            ]"
            @contextmenu.prevent="show"
          >
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="歌手" min-width="15%">
        <template slot-scope="scope">
          <div
            :class="[
              SongInformation[scope.$index].fee == 0 ? 'cord' : '',
              'texts',
            ]"
            @contextmenu.prevent="show"
          >
            {{ scope.row.Songster }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="专辑" min-width="20%">
        <template slot-scope="scope">
          <div
            :class="[
              SongInformation[scope.$index].fee == 0 ? 'cord' : '',
              'texts',
            ]"
            @contextmenu.prevent="show"
          >
            {{ scope.row.album.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="时长" min-width="10%">
        <template slot-scope="scope">
          <div
            :class="[
              SongInformation[scope.$index].fee == 0 ? 'cord' : '',
              'texts',
            ]"
            @contextmenu.prevent="show"
          >
            {{ scope.row.duration | dates }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["song"],
  watch: {
    song(e) {
      // console.log(e);
      this.SongData = JSON.parse(JSON.stringify(e));
      this.dataTreating(e).then(() => {
        this.fenl();
      });
    },
    SongData() {},
  },
  methods: {
    // 关闭选项
    onguabi() {
      this.isshou = false;
    },
    // 播放当前选中1的
    onplay() {
      let datas = JSON.parse(JSON.stringify(this.bofangd));

      this.bofangd.ar = datas.artists;
      this.bofangd.dt = datas.duration;
      localStorage.setItem("Playimmediately", JSON.stringify(this.bofangd));
      this.$store.commit("onPlayimmediately");
    },
    //下一首播放
    xiayspla() {
      let datas = JSON.parse(JSON.stringify(this.bofangd));

      this.bofangd.ar = datas.artists;
      this.bofangd.dt = datas.duration;

      localStorage.setItem("liTheFollowingPiece", JSON.stringify(this.bofangd));

      this.$store.commit("onTheFollowingPiece");
    },
    // 右键data
    YOUda(e) {
      this.bofangd = e;
    },
    //右键显示歌曲
    show(row) {
      // console.log(row);
      // this.rightClickIindex = index;

      if (this.isshou == true) {
        if (
          this.gonna.letX != this.hmgonna.letX &&
          this.gonna.letY != this.hmgonna.letY
        ) {
          this.isshou = false;
          this.gonna.letX = this.hmgonna.letX;
          this.gonna.letY = this.hmgonna.letY;
        }
      }
      this.isshou = true;
    },

    // 鼠标移动
    touchmove(e) {
      // console.log(e)

      //进行判断
      let wodn = document.body.scrollHeight;
      let kuan = document.body.scrollWidth;
      // console.log(document.body.scrollHeight);
      // console.log(document.body.scrollWidth + "宽度");
      if (this.isshou == false) {
        // 获取x 坐标
        // console.log(e.clientX + "X");
        // // 获取y 坐标
        // console.log(e.clientY + "Y");

        if (wodn - e.clientY < 400) {
          // console.log(e.clientY + "Yxiao");

          this.gonna.letY = e.clientY - 365;

          if (kuan - e.clientX < 300) {
            this.gonna.letX = e.clientX - 450;
          } else {
            this.gonna.letX = e.clientX - 180;
          }
        } else {
          // this.gonna.letX = e.clientX - 200;
          if (kuan - e.clientX < 300) {
            this.gonna.letX = e.clientX - 450;
          } else {
            this.gonna.letX = e.clientX - 180;
          }
          this.gonna.letY = e.clientY - 50;
        }
      } else {
        if (wodn - e.clientY < 400) {
          // console.log("已经显示了");
          // = e.clientX - 200;
          if (kuan - e.clientX < 300) {
            this.hmgonna.letX = e.clientX - 450;
          } else {
            this.hmgonna.letX = e.clientX - 180;
          }
          this.hmgonna.letY = e.clientY - 335;
        } else {
          if (kuan - e.clientX < 300) {
            this.hmgonna.letX = e.clientX - 450;
          } else {
            this.hmgonna.letX = e.clientX - 180;
          }
          this.hmgonna.letY = e.clientY - 50;
        }
      }

      // alert("li")
    },

    mons(e) {
      // console.log(e);
    },

    //   表格斑马纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    },
    // 处理数据
    async dataTreating(e) {
      //数据合集
      let datas = {};
      //   专辑
      let album = "";
      //   歌手
      let Songster = "";
      let xiabiao = 0;
      console.log("123");
      for (let index = 0; index < e.length; index++) {
        if ((xiabiao = index + 1) < 10) {
          //   this.SongData[index].indes = "0" + xiabiao;
          this.$set(this.SongData[index], "indes", "0" + xiabiao);
        } else {
          //   this.SongData[index].indes = xiabiao;
          this.$set(this.SongData[index], "indes", xiabiao);
        }

        // 处理歌手的名字
        await this.ondatas(e[index].artists)
          .then((e) => {
            this.SongData[index].Songster = e;
          })
          .catch((data) => {
            // console.log(data);
          });

        // 处理专辑
      }
    },

    // 处理歌手专辑等
    async ondatas(e) {
      // 歌手
      //   console.log(e)
      let Songster = "";
      if (e.length == 1) {
        Songster = e[0].name;
      } else {
        for (let i = 0; i < e.length; i++) {
          if (i == 0) {
            Songster = e[i].name + "/ ";
          } else if ((i = e.length - 1)) {
            Songster += e[i].name;
          } else {
            Songster = e.name + "/ ";
          }
        }
      }

      return Songster;
    },

    // 节流分次渲染
    fenl() {
      this.SongInformation = [];
      // 进行传入分流处理一次处理30条数据
      this.dsqers(this.SongData, 30).then((e) => {
        // console.log(e);

        // console.log(this.info.jieliuData);
        let index = 0;
        //进行拼接数据作为给电脑做一个缓冲也就是先让电脑先渲染这30条数据
        this.SongInformation = this.SongInformation.concat(e[index]);

        this.$nextTick(() => {
          //利用定时器进行分次处理，减少对电脑的压力
          this.dinfsq = setInterval(() => {
            index++;
            this.SongInformation = this.SongInformation.concat(e[index]);
            //  SongInformation 是进行拆分出来的数据 而SongData 就是总数据，这里就作为如果分流数据完全处理好等于总数据了就停止进行数据处理
            if (this.SongInformation.length == this.SongData.length) {
              // console.log("关闭");

              return clearInterval(this.dinfsq);
            }
          }, 550);
          this.$forceUpdate();
        });

        //定时器执行
      });
    },
    //节流处理
    async dsqers(arr, num) {
      // console.log(arr);
      //arr是你要分割的数组，num是以几个为一组
      let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
      for (let i = 0; i < arr.length; ) {
        //注意：这里与for循环不太一样的是，没有i++
        // arr[i].dt = parseInt(arr[i].dt / 1000);
        newArr.push(arr.slice(i, (i += num)));
      }
      return newArr;
    },
  },
  data() {
    return {
      isow: false,
      image_info: {
        image: require("../../assets/max.png"),
        imagers: require("../../assets/sxa.png"),
        xiazai: require("../../assets/xzqb.png"),
      },
      // 总数据
      SongData: [],

      // 显示数据
      SongInformation: [],
      // 定时器
      dinfsq: "",
      gonna: {
        letY: 500,
        letX: 500,
      },
      hmgonna: {
        letY: 500,
        letX: 500,
      },
      isshou: false,
      //保存当前右键的下标
      rightClickIindex: 0,
      bofangd: [],
    };
  },
  created() {},
  filters: {
    dates(mss) {
      // console.log(mss)
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + ":" + seconds;
    },
  },
};
</script>
<style lang="less" scoped>
.tubiao {
  width: 100%;
  height: 100%;
  // border: 1px solid #000;
  display: flex;
  align-items: center;
}
// 右键
.gonNen {
  position: absolute;
  z-index: 5;
  height: 275px;
  width: 250px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  // border: 1px solid #000;
  box-shadow: 0 0 10px rgba(73, 73, 73, 0.616);
  ul {
    margin-top: 15px;
    li {
      height: 42px;
      // border: 1px solid #000;
      &:hover {
        background-color: rgba(211, 211, 211, 0.445);
      }
      .conten {
        margin-left: 10px;
        margin-right: 10px;
        // border: 1px solid #000;
        height: 100%;
        display: flex;
        align-items: center;
        .img {
          height: 20px;
          width: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:nth-child(1) {
        .conten {
          margin-left: 10px;
          margin-right: 10px;
          // border: 1px solid #000;
          height: 100%;
          display: flex;
          align-items: center;
          .img {
            height: 19px;
            width: 19px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      &:nth-child(3) {
        border-bottom: 1px solid rgb(212, 212, 212);
      }
      &:nth-child(4) {
        .conten {
          margin-left: 10px;
          margin-right: 10px;
          // border: 1px solid #000;
          height: 100%;
          display: flex;
          align-items: center;
          .img {
            height: 19px;
            width: 19px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            margin-left: 1px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

.texts {
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 20px;
  width: 100%;
}
.cord {
  color: rgb(180, 180, 180);
}
.Geqlist {
  min-width: 900px;
  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(202, 201, 201, 0.363);
    border: none !important;
  }
  /deep/.el-table {
    border: none !important;
    //   background-color: #fcfcfc;
    tr {
      border: none !important;
      td {
        &:nth-child(1) {
          .cell {
            margin: 0 auto;
            text-align: right;
            width: 70px;
            line-height: 0 !important;
          }
        }
        .cell {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-height: 0 !important;
          -webkit-box-orient: vertical;
          display: flex;
          align-items: center;
          width: 100%;
          height: 100% !important;
          // border: 1px solid #000;
        }
      }
      height: 40px;
    }
    .el-table__row {
      td {
        border: none !important;
      }

      .el-table__cell {
        padding: 0;
        height: 40px;
      }
    }
  }
}
.imgs {
  //   border: 1px solid #000;
  display: flex !important;
  //   justify-content: space-between;
  justify-content: center;
  align-items: center;
  .index {
    margin: 0 auto;
  }
  .tumian {
    display: flex;
    align-items: center;
    width: 50px;
    justify-content: space-between;
  }
}
.el-table__row > td {
  border: none !important;
}
.el-table::before {
  //去掉最下面的那一条线
  height: 0px !important;
}
</style>